<template>
  <!--
    action: 提交到服务器的地址
    file-list: 显示的文件列表, 格式是对象数组 [ { url: xxx }, { url: xxx }]
    list-type: 文件列表类型
    on-remove: 图片移除时的钩子
 -->
  <div class="upload-img">
    <el-upload
      accept="image/png, image/jpeg"
      :class="{ disabled: value }"
      action="#"
      :file-list="fileList"
      list-type="picture-card"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
      :http-request="handleUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 图片预览弹框 -->
    <el-dialog
      title="预览"
      :visible="isShow"
      @close="isShow = false"
    >
      <img :src="value" width="100%">
    </el-dialog>
  </div>

</template>

<script>

import COS from 'cos-js-sdk-v5'

export default {
  name: 'UploadImg',
  props: {
    // 接收父传子的value属性（头像地址）
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShow: false
    }
  },
  computed: {
    fileList: {
      get() {
        return this.value
          ? [{ url: this.value }] : []
      },
      set() {

      }
    }
  },
  methods: {
    // 移除
    handleRemove() {
      // 需要把value清空
      // 子传父，触发input事件，并传递空字符串
      this.$emit('input', '')
    },
    // 预览
    handlePreview() {
      this.isShow = true
    },
    // 上传
    handleUpload({ file }) {
      // file: 选择的图片文件对象
      // 把选择的图片对象发至腾讯云服务器
      // 实例化 cos
      const cos = new COS({
        SecretId: 'AKIDSggSyHBG5lBnAHwqRvviFZfV5PULmtmy',
        SecretKey: '6wasPhDUXXJ2cy5wNdJyNWP5Wkm3vZy8'
      })
      // 调用方法上传
      cos.putObject({
        Bucket: 'jinitaimei-1305128831', // 桶名
        Region: 'ap-beijing', // 地区
        Key: file.name, // 文件名
        Body: file// 文件对象
      }, (err, data) => {
        if (err) {
          return this.$message.success('上传失败')
        }
        // 拿到上传成功的图片地址，同步到父组件中
        this.$emit('input', `https://${data.Location}`)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-upload {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 146px;
    height: 146px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .el-upload:hover {
    border-color: #409EFF;
  }
  .el-icon-plus {
    font-size: 60px;
    color: #8c939d;
    text-align: center;
  }
  .disabled {
    .el-upload {
      display: none;
    }
  }
</style>
